import React, { useEffect, useRef } from "react";
import {
  Badge,
  CommonEvent,
  ExtensionCategory,
  Graph,
  GraphEvent,
  iconfont,
  Label,
  Rect,
  register,
  treeToGraphData,
} from "@antv/g6";

const COLORS = {
  B: "#1783FF",
  R: "#F46649",
  Y: "#DB9D0D",
  G: "#60C42D",
  DI: "#A7A7A7",
};
const GREY_COLOR = "#CED4D9";

// 自定义树节点
class TreeNode extends Rect {
  // ... 保持原有TreeNode类的完整实现 ...
  // 注意：这里需要包含完整的TreeNode类代码
  // 为节省篇幅，实际使用时请复制原代码中的TreeNode类
}

// 注册自定义节点
register(ExtensionCategory.NODE, "tree-node", TreeNode);

const DecisionTree = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        if (!containerRef.current) return;

        const graph = new Graph({
          container: containerRef.current,
          data: {
            nodes: [
              {
                id: "root",
                name: "Root Server",
                status: "success",
                type: "local",
                url: "http://localhost:3000",
                style: {
                  collapsed: false,
                },
                children: ["server1", "server2"],
              },
              {
                id: "server1",
                name: "Server 1",
                status: "success",
                type: "local",
                url: "http://server1.local",
                style: {
                  collapsed: false,
                },
                children: ["server1-1", "server1-2"],
              },
              {
                id: "server1-1",
                name: "Server 1-1",
                status: "success",
                type: "local",
                url: "http://server1-1.local",
                style: {
                  collapsed: true,
                },
              },
              {
                id: "server1-2",
                name: "Server 1-2",
                status: "error",
                type: "remote",
                url: "http://server1-2.local",
                style: {
                  collapsed: true,
                },
              },
              {
                id: "server2",
                name: "Server 2",
                status: "warning",
                type: "remote",
                url: "http://server2.local",
                style: {
                  collapsed: false,
                },
                children: ["server2-1", "server2-2"],
              },
              {
                id: "server2-1",
                name: "Server 2-1",
                status: "warning",
                type: "remote",
                url: "http://server2-1.local",
                style: {
                  collapsed: true,
                },
              },
              {
                id: "server2-2",
                name: "Server 2-2",
                status: "success",
                type: "local",
                url: "http://server2-2.local",
                style: {
                  collapsed: true,
                },
              },
            ],
            edges: [
              {
                source: "root",
                target: "server1",
              },
              {
                source: "root",
                target: "server2",
              },
              {
                source: "server1",
                target: "server1-1",
              },
              {
                source: "server1",
                target: "server1-2",
              },
              {
                source: "server2",
                target: "server1-2",
              },
              {
                source: "server1",
                target: "server2-2",
              },
              {
                source: "server2",
                target: "server2-1",
              },
              {
                source: "server2",
                target: "server2-2",
              },
            ],
          },
          node: {
            type: "react",
            // style: {
            //   component: (data) => {
            //     return (
            //       <NodeComponent
            //         data={data}
            //         graph={graph}
            //         onChange={(newData) => {
            //           graph.updateData("node", {
            //             id: data.id,
            //             data: newData,
            //           });
            //         }}
            //       />
            //     );
            //   },
            // },
            style: {
              size: [202, 60],
              ports: [{ placement: "left" }, { placement: "right" }],
              radius: 4,
            },
          },
          edge: {
            type: "cubic-horizontal",
            style: {
              stroke: GREY_COLOR,
            },
          },
          layout: {
            type: "compact-box",
            direction: "LR",
            dropCap: false,
            indent: 300,
            getHeight: function getHeight() {
              return 0;
            },
            getWidth: function getWidth() {
              return 120;
            },
            getVGap: function getVGap() {
              return 50;
            },
            getHGap: function getHGap() {
              return 100;
            },
            preLayout: false,
          },
          behaviors: ["zoom-canvas", "drag-canvas"],
        });

        graph.once(GraphEvent.AFTER_RENDER, () => {
          graph.fitView();
        });

        graph.render();

        // 清理函数
        return () => {
          graph.destroy();
          document.head.removeChild(style);
        };
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        width: "100%",
        height: "100vh",
        background: "#f5f5f5",
        overflow: "hidden",
      }}
    />
  );
};

export default DecisionTree;
